/**
 * @description 列表页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Input, InputNumber, Radio } from 'antd';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { debounce } from 'lodash-es'
import { copyTemplate, pasteTemplate, copyBlock, pasteBlock } from '@/utils/clipboard';
import { FlagOptions, iconTextReg } from '@/utils/Const';
import { goodTypeOptions, switchGoodType } from '@/utils/goodList';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import AttrExtra from './Components/AttrExtra';
import GoodAttrEntry from './GoodAttr';

function ListAtrr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // input组件onChange事件防抖
  let onConfigEvent_debounce = debounce((keys, newValue) => {
    onConfigEvent(keys, newValue)
  }, 300)


  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }
  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // 属性栏右上角按钮事件
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {

    let items = [
      {
        key: "page",
        label: "总盒子",
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: "category",
        label: "分类",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'category', ['category'], 'listpage')} />,
        children: <>
          <Form.Item
            label="个数"
            name={['category', 'base', 'limit']}
          >
            <InputNumber
              min={1}
              precision={0}
              onChange={(value) => onConfigEvent(['category', 'base', 'limit'], value)}
            />
          </Form.Item>

          <Collapse accordion items={[
            {
              key: "box",
              label: "列表盒子",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category', 'default']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category'])} />
            },
            {
              key: "item",
              label: "item盒子",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category_item', 'default']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category_item'])} />
            },
            {
              key: "item-hover",
              label: "item盒子-悬浮",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category_item', 'hover']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category_item'])} />
            },
            {
              key: "item-active",
              label: "item盒子-激活",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category_item_active', 'default']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category_item_active'])} />
            },
            {
              key: "img",
              label: "图片",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category_img', 'default']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category_img'])} />
            },
            {
              key: "text",
              label: "文本",
              children: <StyleWrapper form={form} preKeys={['category', 'listpage_category_text', 'default']} onStyleChange={() => upateStyleEvent(['category', 'listpage_category_text'])} />
            },
          ]}
          />

        </>
      },
      {
        key: "search",
        label: "搜索表单",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'search', ['search'], 'search')} />,
        children:
          <Collapse accordion items={[
            {
              key: "base",
              label: "基础配置",
              children:
                <>
                  <Form.Item
                    label="标签开关"
                    name={['search', 'base', 'labelFlag']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['search', 'base', 'labelFlag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>
                  <Form.Item
                    label="冒号开关"
                    name={['search', 'base', 'colonFlag']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['search', 'base', 'colonFlag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>
                  <Form.Item
                    label="查询按钮文本"
                    name={['search', 'base', 'search_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['search', 'base', 'search_text'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="新增按钮文本"
                    name={['search', 'base', 'add_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['search', 'base', 'add_text'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="查询按钮图标"
                    name={['search', 'base', 'search_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['search', 'base', 'search_icon'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="新增按钮图标"
                    name={['search', 'base', 'add_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['search', 'base', 'add_icon'], e.target.value)}
                    />
                  </Form.Item>
                </>
            },
            {
              key: "form",
              label: "表单盒子",
              children: <StyleWrapper form={form} preKeys={['search', 'search_form', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_form'])} />
            },
            {
              key: "item",
              label: "输入框盒子",
              children: <StyleWrapper form={form} preKeys={['search', 'search_item', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_item'])} />
            },
            {
              key: "label",
              label: "标签",
              children: <StyleWrapper form={form} preKeys={['search', 'search_label', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_label'])} />
            },
            {
              key: "placeholder",
              label: "提示语",
              children: <StyleWrapper form={form} preKeys={['search', 'search_placeholder', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_placeholder'])} />
            },
            {
              key: "input",
              label: "普通",
              children:
                <Collapse accordion items={[
                  {
                    key: "input",
                    label: "普通",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_input', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_input'])} />
                  },
                  {
                    key: "input-hover",
                    label: "普通-聚焦",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_input', 'focus']} onStyleChange={() => upateStyleEvent(['search', 'search_input'])} />
                  },
                  {
                    key: "icon",
                    label: "图标",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_input_icon', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_input_icon'])} />
                  },
                  {
                    key: "icon-hvoer",
                    label: "图标-悬浮",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_input_icon', 'hover']} onStyleChange={() => upateStyleEvent(['search', 'search_input_icon'])} />
                  },
                ]}
                />
            },
            {
              key: "select",
              label: "单选",
              children:
                <Collapse accordion items={[
                  {
                    key: "input",
                    label: "单选",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_select', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_select'])} />
                  },
                  {
                    key: "focus",
                    label: "聚焦",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_select', 'focus']} onStyleChange={() => upateStyleEvent(['search', 'search_select'])} />
                  },
                  {
                    key: "icon",
                    label: "图标",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_select_icon', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_select_icon'])} />
                  },
                  {
                    key: "icon-hvoer",
                    label: "图标-悬浮",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_select_icon', 'hover']} onStyleChange={() => upateStyleEvent(['search', 'search_select_icon'])} />
                  },
                ]}
                />
            },
            {
              key: "date",
              label: "日期",
              children:
                <Collapse accordion items={[
                  {
                    key: "input",
                    label: "日期",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_date', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_date'])} />
                  },
                  {
                    key: "focus",
                    label: "聚焦",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_date', 'focus']} onStyleChange={() => upateStyleEvent(['search', 'search_date'])} />
                  },
                  {
                    key: "icon",
                    label: "图标",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_date_icon', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_date_icon'])} />
                  },
                ]}
                />
            },
            {
              key: "btn",
              label: "按钮",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_btn_box', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_btn_box'])} />
                  },
                  {
                    key: "search",
                    label: "查询",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_submit', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_submit'])} />
                  },
                  {
                    key: "search-hover",
                    label: "查询-悬浮",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_submit', 'hover']} onStyleChange={() => upateStyleEvent(['search', 'search_submit'])} />
                  },
                  {
                    key: "add",
                    label: "新增",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_add', 'default']} onStyleChange={() => upateStyleEvent(['search', 'search_add'])} />
                  },
                  {
                    key: "add-hover",
                    label: "新增-悬浮",
                    children: <StyleWrapper form={form} preKeys={['search', 'search_add', 'hover']} onStyleChange={() => upateStyleEvent(['search', 'search_add'])} />
                  },

                ]}
                />
            },
          ]}
          />
      },
      {
        key: "sort",
        label: "排序",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'sort', ['sort'], 'sort')} />,
        children:
          <Collapse accordion items={[
            {
              key: "text",
              label: "文本",
              children:
                <>
                  <Form.Item
                    label="价格"
                    name={['sort', 'base', 'price_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['sort', 'base', 'price_text'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="点赞量"
                    name={['sort', 'base', 'thumbsupnum_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['sort', 'base', 'thumbsupnum_text'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="收藏量"
                    name={['sort', 'base', 'storeupnum_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['sort', 'base', 'storeupnum_text'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="点击量"
                    name={['sort', 'base', 'clicknum_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['sort', 'base', 'clicknum_text'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="浏览时长"
                    name={['sort', 'base', 'browseduration_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['sort', 'base', 'browseduration_text'], e.target.value)}
                    />
                  </Form.Item>
                </>
            },
            {
              key: "icon",
              label: "图标",
              children:
                <>
                  <Form.Item
                    label="价格"
                    name={['sort', 'base', 'price_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'price_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="点赞"
                    name={['sort', 'base', 'thumbsupnum_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'thumbsupnum_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="收藏"
                    name={['sort', 'base', 'storeupnum_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'storeupnum_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="点击"
                    name={['sort', 'base', 'clicknum_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'clicknum_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="浏览时长"
                    name={['sort', 'base', 'browseduration_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'browseduration_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="降序"
                    name={['sort', 'base', 'desc_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'desc_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="升序"
                    name={['sort', 'base', 'asc_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['sort', 'base', 'asc_icon'], e.target.value)}
                    />
                  </Form.Item>

                </>
            },
            {
              key: "box",
              label: "盒子",
              children: <StyleWrapper form={form} preKeys={['sort', 'sort_box', 'default']} onStyleChange={() => upateStyleEvent(['sort', 'sort_box'])} />
            },
            {
              key: "btn",
              label: "按钮",
              children: <StyleWrapper form={form} preKeys={['sort', 'sort_btn', 'default']} onStyleChange={() => upateStyleEvent(['sort', 'sort_btn'])} />
            },
            {
              key: "btn-hover",
              label: "按钮-悬浮",
              children: <StyleWrapper form={form} preKeys={['sort', 'sort_btn', 'hover']} onStyleChange={() => upateStyleEvent(['sort', 'sort_btn'])} />
            },
            {
              key: "btn-act",
              label: "按钮-激活",
              children: <StyleWrapper form={form} preKeys={['sort', 'sort_btn_active', 'default']} onStyleChange={() => upateStyleEvent(['sort', 'sort_btn_active'])} />
            },
          ]} />
      },
      {
        key: "list",
        label: "商品列表",
        children:
          <>
            <Form.Item
              label="列表样式"
              name={['listlist', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['listlist', 'base', 'type'], 'listlist', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['listlist_box', 'default']} onStyleChange={() => upateStyleEvent(['listlist_box'])} />
              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['listlist'], 'listlist')} />,
                children:
                  < GoodAttrEntry type={template2.listlist.base.type} blockKey='listlist' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
            ]} />
          </>
      },
      {
        key: 'pagination',
        label: '分页',
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'pagination', ['pagination'], 'pagination')} />,
        children:
          < Collapse accordion size='middle' items={[
            {
              key: 'config',
              label: '基础属性',
              children:
                <>
                  <Form.Item
                    label="上一页文字"
                    name={['pagination', 'base', 'prev']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent_debounce(['pagination', 'base', 'prev'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="下一页文字"
                    name={['pagination', 'base', 'next']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent_debounce(['pagination', 'base', 'next'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="一页时是否隐藏"
                    name={['pagination', 'base', 'hideOnSinglePage']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['pagination', 'base', 'hideOnSinglePage'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item >

                  <Form.Item
                    label="是否展示 每页条数"
                    name={['pagination', 'base', 'showSizeChanger']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['pagination', 'base', 'showSizeChanger'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item >
                </>
            },
            {
              key: 'wrapper',
              label: '总盒子',
              children:
                <StyleWrapper form={form} preKeys={['pagination', 'pagination_wrapper', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_wrapper'])} />
            },
            {
              key: 'list',
              label: '列表盒子',
              children:
                <StyleWrapper form={form} preKeys={['pagination', 'pagination_box', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_box'])} />
            },
            {
              key: 'item',
              label: 'item',
              children: <Collapse accordion size='middle' items={[
                {
                  key: 'total',
                  label: '总共',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_total', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_total'])} />
                },
                {
                  key: 'pre',
                  label: '上一页和下一页',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_pre', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_pre'])} />
                },
                {
                  key: 'pre_disable',
                  label: '上一页和下一页-禁止',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_pre_disable', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_pre_disable'])} />
                },
                {
                  key: 'item',
                  label: '页码',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_item', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_item'])} />
                },
                {
                  key: 'item_hover',
                  label: '页码-悬浮',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_item', 'hover']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_item'])} />
                },
                {
                  key: 'item_active',
                  label: '页码-激活',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_item_active', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_item_active'])} />
                },
                {
                  key: 'size',
                  label: '每页条数',
                  children:
                    <StyleWrapper form={form} preKeys={['pagination', 'pagination_size', 'default']} onStyleChange={() => upateStyleEvent(['pagination', 'pagination_size'])} />
                },
              ]} />
            },
          ]} />

      },
      {
        key: "hot",
        label: "热门信息",
        children:
          <>
            <Form.Item
              label="列表样式"
              name={['listhot', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['listhot', 'base', 'type'], 'listhot', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['listhot_box', 'default']} onStyleChange={() => upateStyleEvent(['listhot_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['listhot_title'], 'listhot')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['listhot_title', 'listhot_title', 'default']} onStyleChange={() => upateStyleEvent(['listhot_title', 'listhot_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['listhot_title', 'listhot_title_text', 'default']} onStyleChange={() => upateStyleEvent(['listhot_title', 'listhot_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['listhot_title', 'listhot_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['listhot_title', 'listhot_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['listhot'], 'listhot')} />,
                children:
                  < GoodAttrEntry type={template2.listhot.base.type} blockKey='listhot' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
            ]} />
          </>
      },
    ]
    return items
  }, [
    template2.listlist.base.type,
    template2.listhot.base.type,
    updateCtx.updateFlag

  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='list'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 8,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(ListAtrr) 